<template>
  <div class="infinite-container">
    <div class="topBg">
      <div class="doctor_info flex flex_vcenter" v-if="orderData.doctor">
        <img
          v-lazy="orderData.doctor && orderData.doctor.header || ''"
          style="border-radius: 50%;"
          alt
        />
        <div class="flex_full">
          <div>
            <span class="docName">{{orderData.doctor && orderData.doctor.name}}</span>
            <span class="docTitle">{{orderData.doctor && orderData.doctor.professionaltitle}}</span>
          </div>
          <div class="mt10">
            <span>{{orderData.doctor && orderData.doctor.orgname || ""}}</span>
            <span class="pl10">{{orderData.doctor.deptname}}</span>
          </div>
        </div>
      </div>
      <div class="lefttime mt20">
        <span v-if="payRemainingSeconds">
          剩余支付时间：
          <TimeCountDown :leftTime="payRemainingSeconds" :data-index="1" />
        </span>
        <span v-else>
          订单支付超时
        </span>

      </div>
      <div class="text-center t8 mt10">
        {{pageAction}}
        <span
          class="feeText"
          style="font-size: 24px;"
        >￥{{orderData.ask && orderData.ask.cost}}</span>
      </div>
    </div>
    <div class="bgwhite">
      <mu-list>
        <mu-list-item title="费用总额">
          <span slot="right" class="feeText">{{orderData.ask && '￥'+ orderData.ask.cost||'￥'}}</span>
        </mu-list-item>
        <mu-divider />
        <mu-list-item title="自费金额">
          <span slot="right" class="feeText">{{ payAmount | fixedMoney}}</span>
        </mu-list-item>
      </mu-list>
    </div>
    <div class="mt10"></div>
    <pay-method busType="6" @typeChange="payTypeChange"></pay-method>
    <div class="longBtnC">
      <mu-raised-button
        class="submit-btn"
        label="确认支付"
        fullWidth
        primary
        @click="beforePay()"
        :disabled="disabled"
      ></mu-raised-button>
    </div>
  </div>
</template>

<script>
import payMethod from "../../components/payMethod.vue";
import TimeCountDown from "../../components/TimeCountDown.vue";
import { commonAjaxJson, RESTFUL_API } from "@/api/api";
import wxPay from "../../api/wxPay.js";
export default {
  data() {
    return {
      hospitalCode: sessionStorage.getItem("hospitalCode") || "1",
      doctor: {},
      fee: 0,
      pageAction: "",
      orderData: {},
      familyPerson: JSON.parse(sessionStorage.familyPerson || "{}"),
      agtOrderNumber: "",
      disabled: false,
      payType: "1",
      IS_NEED_BUDGET: false,
      prompting: "",
      payAmount: 0,
      payRemainingSeconds: 0
    };
  },
  components: {
    payMethod,
    TimeCountDown
  },

  mounted() {
    this.getSysParameterList();
  },
  methods: {
    getFee(data) {
      const { pageAction } = this.$route.query;
      this.doctor.imageAbleFee = data.imageAbleFee;
      this.doctor.imageAblePrimitiveFee = data.imageAblePrimitiveFee;
      this.doctor.telephoneFee = data.telephoneFee;
      this.doctor.telephonePrimitiveFee = data.telephonePrimitiveFee;
      this.doctor.returnVisitFee = data.telephoneFee;
      this.doctor.returnVisitPrimitiveFee = data.telephonePrimitiveFee;
      this.doctor.videoFee = data.telephoneFee;
      this.doctor.videoPrimitiveFee = data.telephonePrimitiveFee;
      if (pageAction == "videoFlag") {
        this.fee =
          Number(this.doctor.videoFee) < Number(this.doctor.videoPrimitiveFee)
            ? this.doctor.videoFee
            : this.doctor.videoPrimitiveFee;
        this.pageAction = "视频咨询";
      } else if (pageAction == "telephoneFlag") {
        this.fee =
          Number(this.doctor.telephoneFee) <
          Number(this.doctor.telephonePrimitiveFee)
            ? this.doctor.telephoneFee
            : this.doctor.telephonePrimitiveFee;
        this.pageAction = "电话咨询";
      } else if (pageAction == "cloudVisit") {
        this.fee =
          Number(this.doctor.cloudVisitFee) <
          Number(this.doctor.cloudVisitPrimitiveFee)
            ? this.doctor.cloudVisitFee
            : this.doctor.cloudVisitPrimitiveFee;
        this.pageAction = "云诊室";
      } else {
        this.fee =
          Number(this.doctor.imageAbleFee) <
          Number(this.doctor.imageAblePrimitiveFee)
            ? this.doctor.imageAbleFee
            : this.doctor.imageAblePrimitiveFee;
        this.pageAction = "图文咨询";
      }
    },
    budget() {
      let param = {
        hospitalCode: this.hospitalCode,
        patientCode: this.getFirstCode(this.orderData.ask.patientCode),
        departmentCode: this.orderData.ask.deptCode,
        doctorCode: this.orderData.ask.doctCode,
        consultType: this.orderData.ask.consultType,
        regFee: this.orderData.ask.cost
      };
      commonAjaxJson(`${RESTFUL_API.budgetAndSettlement}`, param, true).then(
        res => {
          if (res.data.code == 200) {
            this.prompting = res.data.data.settlementDetails;
            this.payAmount = res.data.data.payAmount;
          } else {
            this.$store.commit("UPDATE_TOAST", { message: res.data.message });
          }
        }
      );
    },
    getSysParameterList() {
      let params = {
        moduleId: "020000"
      };
      commonAjaxJson(RESTFUL_API.getSysParameterList, params, true).then(
        res => {
          if (res.data.code == 200 && res.data.data) {
            res.data.data.forEach(v => {
              if (
                v.parameterKey &&
                v.parameterKey === "OC_need_budget" &&
                v.parameterValue == 1
              ) {
                console.log("需要预结算");
                this.IS_NEED_BUDGET = true;
                this.loadPageData();
              }
            });
          }
        }
      );
    },
    payTypeChange(val) {
      this.payType = val;
    },
    loadPageData() {
      if (!this.$route.query.cid) {
        this.$store.commit("UPDATE_TOAST", {
          message: "页面错误!"
        });
        return;
      }
      var param = {
        consultId: this.$route.query.cid
      };
      commonAjaxJson(RESTFUL_API.queryDetail, param, true).then(res => {
        const { code, data } = res.data;
        if (code == 200) {
          this.payRemainingSeconds = data.payRemainingSeconds || 0;
          this.disabled = data.payRemainingSeconds === 0
          this.getFee(res.data.data);
          this.orderData = res.data.data;
          if (this.IS_NEED_BUDGET) {
            this.budget();
          }
        }
      });
    },
    getFirstCode(code) {
      if (code && code.indexOf(",") > -1) {
        return code.split(",")[0];
      }
      return code;
    },
    beforePay() {
      if (this.payAmount == 0) {
        this.payType = "99";
        this.pay();
      } else {
        this.pay();
      }
    },
    zeroPay() {
      let param = {
        hospitalCode: this.hospitalCode,
        patientCode: this.getFirstCode(this.orderData.ask.patientCode),
        departmentCode: this.orderData.ask.deptCode,
        doctorCode: this.orderData.ask.doctCode,
        payAmount: "0",
        consultType: this.orderData.ask.consultType,
        regFee: this.orderData.ask.cost,
        consultId: this.$route.query.cid
      };
      commonAjaxJson(RESTFUL_API.zeroPaymentForConsultAsk, param, true).then(
        res => {
          if (res.data.code == 200) {
            this.$router.replace({
              path: "/payResult",
              query: {
                result: "ok",
                backPath: "/queryHistory/index",
                backName: "查看我的问诊记录"
              }
            });
          } else {
            this.$store.commit("UPDATE_TOAST", {
              message: res.data.message
            });
          }
        }
      );
    },
    pay(fee, code, str) {
      let body = {
        busType: 6,
        doctorCode: this.orderData.ask.doctCode, //医生代码
        patientCode: this.getFirstCode(this.orderData.ask.patientCode), //病人id
        consultId: this.$route.query.cid
        // "departmentCode": this.orderData.deptCode, //科室代码
        // "doctorCode": this.orderData.doctor.code, //医生代码
        // "departmentCode": this.orderData.ask.deptCode, //科室代码
        // "regFee": this.orderData.ask.cost
      };
      let param = {
        hospitalCode: this.hospitalCode,
        name: this.orderData.ask.personName,
        amt: this.payAmount,
        payType: this.payType,
        body: JSON.stringify(body),
        mobile: this.orderData.ask.phoneNo
      };
      console.log(JSON.stringify(param));
      window.location.href =
        "app://queryOnlinePay?param=" + JSON.stringify(param);
    },
    payOk() {
      let param = {
        outTradeNo: this.agtOrderNumber
      };
      commonAjaxJson("ppTrade/payProcessTrade", param, true).then(res => {
        if (res.data.code == 200) {
          console.log("his收到");
        }
      });
      this.$router.replace({
        path: "/payResult",
        query: {
          result: "ok",
          backPath: "/queryHistory/index",
          backName: "查看我的问诊记录"
        }
      });
    },
    payFail() {
      this.$router.replace({
        path: "/payResult",
        query: {
          result: "fail",
          backPath: "/queryOnline/confirmPay?cid=" + this.$route.query.cid,
          backName: "重新支付"
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../common/css/vars";
@import "../../common/css/component";
.infinite-container {
  .topBg {
    background-color: white;
    padding: 10px;
    .doctor_info {
      color: #333;
      border-radius: 16px;
      padding: 10px;
      box-shadow: 0px 0px 10px 1px rgba(92, 92, 92, 0.14);
      img {
        width: 80px;
        height: 80px;
        margin: 0 10px 0 0;
      }
      .docName {
        font-size: 16px;
        font-weight: bold;
      }
      .docTitle {
        font-size: 12px;
        color: #f60;
        border: 1px solid #f60;
        border-radius: 16px;
        padding: 0 3px;
      }
    }
  }
  @{deep} .mu-item-left img {
    width: 30px;
    height: 30px;
  }
  @{deep} .mu-item.show-left {
    padding-left: 60px;
  }
  @{deep} .mu-item-title {
    color: #333;
  }
  @{deep} .mu-item-text {
    color: #ccc;
  }
  @{deep} .mu-item {
    min-height: 60px;
  }
  .lefttime {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    color: #666;
    // background: #fffdce;
  }
}
</style>
